<template>
  <div class="middle">
    <div class="school-map">
      <SchoolMap />
    </div>
    <div class="every-college">
      <!-- <h3>毕业率</h3> -->
      <Graguated />
    </div>
  </div>
</template>

<script>
import SchoolMap from "./MapComponent.vue";
// import EveryCollege from "./EveryCollege.vue";
import Graguated from "./Graguated.vue";

export default {
  name: "MiddleComponent",
  components: {
    SchoolMap,
    // EveryCollege,
    Graguated,
  },
};
</script>

<style scoped>
.middle {
  display: flex;
  flex-direction: column; /* 设置为垂直方向排列 */
  height: 100%; /* 将高度设置为视口高度 */
  width: 100%;

  /* border-radius: 10px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  border-left: 1px solid rgba(255, 255, 255, 0.35); */
}

.school-map,
.every-college {
  display: flex;
  justify-content: center; /* 水平居中对齐 */
  align-items: center; /* 垂直居中对齐 */
}

.school-map {
  flex: 7;
  /* background-color: rgb(245, 194, 128); */
}
.every-college {
  display: flex;
  flex-direction: column; /* 设置为垂直方向排列 */
  flex: 2;
  /* background-color: rgb(246, 202, 239); */
}
.every-college h3{
  color:#fff;
}
</style>
